import React, { useState, useEffect, FC } from 'react'
import {
  Space, Button, Row, Image, Col, message,
  Popover
} from 'antd'
import { useNavigate, useLocation } from 'react-router-dom'
import { AlertOutlinedIcon, ReloadOutlinedIcon } from '@/models/icons'
import { useAppSelector, useAppDispatch } from '@/store'
import KanBanFC from '@/components/kanban/kanban'
import UserHeaderFC from '@/components/userheader/userheader'
import { IData } from '@/models/common'
import "./topheader.scss"
export interface ILayoutHeader {
  onKanBanChange?: (value: 'list' | 'icon') => void
  onReload?: () => void
  kanBanShow?: boolean
  topSearchShow?: boolean
  topTransmissionShow?: boolean
}
export interface IViewModel {

}

const LayoutHeader: FC<ILayoutHeader> = (props) => {
  const dispatch = useAppDispatch()
  const navigate = useNavigate()
  const userInfo = useAppSelector((state) => state.login.userInfo)
  const diskStatus = useAppSelector((state) => state.login.diskStatus)
  const { onKanBanChange, onReload, kanBanShow, topSearchShow, topTransmissionShow } = props

  const [data, setData] = useState<IData<IViewModel>>({
    ViewModel: {

    }
  })

  const methods = {
    renderDiskStatus() {
      const content = <div style={{ maxWidth: 250 }}>{diskStatus}</div>
      return diskStatus ? <Col className='disk-status'>
        <Popover content={content} title={null} placement='bottom' showArrow>
          <Button type="text" danger icon={<AlertOutlinedIcon style={{ fontSize: 22 }} />}></Button>
        </Popover>
      </Col> : null
    },
    renderPage() {
      return (<>
        <Row className='enterprise-header'>
          <Row className='header-left' wrap gutter={20} align='middle'>
            <Col className='enterprise-name-box'>
              <span>企业文档管理</span>
              <div className='enterprise-name'>盛威时代科技股份有限公司</div>
            </Col>
            {/* 看板 */}
            <KanBanFC onChange={onKanBanChange} />
            {/* 刷新 */}
            <Col className='reload-box'>
              <Button type="default" icon={<ReloadOutlinedIcon style={{ fontSize: 18 }} />} size='large' className='reload' onClick={onReload} />
            </Col>
          </Row>
          <Row className='header-right' wrap align='middle'>
          
            <UserHeaderFC/>
          </Row>
        </Row>
      </>
      )
    }
  }

  return methods.renderPage()
}
LayoutHeader.defaultProps = {
  kanBanShow: true,
  topSearchShow: true,
  topTransmissionShow: true,
}
export default LayoutHeader